<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <script type="text/javascript" src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/vue/2.6.14/vue.min.js"></script><script type="text/javascript" src="https://cdn.staticfile.org/Swiper/9.4.1/swiper-bundle.min.js"></script><link rel="stylesheet" href="https://cdn.staticfile.org/Swiper/9.4.1/swiper-bundle.min.css" />
    <title>119-swiper_全屏滑动动画</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .title,
      .content {
        opacity: 0;
      }
      /* 动画 */
      .active .title {
        animation: fadeInUp 1s forwards;
        animation-delay: 0s;
      }
      .active .content {
        animation: fadeInUp 1s forwards;
        animation-delay: 0.2s;
      }
      @keyframes fadeInUp {
        0% {
          opacity: 0;
          transform: translateY(20px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div
            v-for="(item, index) in 5"
            :key="index"
            :class="['swiper-slide', { active: activeList.includes(index) }]"
          >
            Slide {{ index }}
            <p class="title">我是标题</p>
            <p class="content">
              我是内容
              <a href="https://www.swiper.com.cn" target="_blank">swiper</a>
            </p>
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <div class="swiper-scrollbar"></div>
      </div>
    </div>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            activeIndex: 0,
            activeList: [0]
          }
        },
        mounted() {
          var mySwiper = new Swiper('.swiper', {
            autoHeight: true,
            height: window.innerHeight,
            direction: 'vertical', // 垂直切换选项
            loop: false, // 循环模式选项
            mousewheel: true,
            on: {
              slideChangeTransitionEnd: (e) => {
                const i = e.activeIndex
                this.activeIndex = i
                if (!this.activeList.includes(i)) {
                  this.activeList.push(i)
                }
              }
            },
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination'
            },
            // 如果需要滚动条
            scrollbar: {
              el: '.swiper-scrollbar'
            }
          })
        }
      })
    </script>
  </body>
</html>
